


class Enlarge 
{
    constructor(el) 
    {
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.imgObj.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        // 开启功能
        this.init()

    }
    init() 
    {
        // 鼠标移入显示 移出隐藏
        this.mouseover()
        // 鼠标控制移动
        this.mousemove()
        //  设置放大镜显示尺寸
        this.enlargeSize()
        // 切换图片
        this.change()
    }
    change() 
    {
        this.liObj = this.el.querySelectorAll('ul li')
        this.liObj.forEach((item) => 
        {
            item.onclick = () => 
            {
                this.el.querySelector('ul li.active').className = ''
                item.className = 'active'
                let num = item.getAttribute('imgName')
                this.imgObj.style.backgroundImage = `url(./imgs/${num}.jpg)`
                this.enlargeObj.style.backgroundImage = `url(./imgs/${num}.big.jpg)`

            }
        })
    }

    enlargeSize() 
    {
        //获取放大背景图片尺寸
        let enlargebg = (this.getStyle(this.enlargeObj, 'background-size')).split(' ')
        //获取显示图片大小
        let imgWidth = parseInt(this.getStyle(this.imgObj, 'width'))
        let imgHeight = parseInt(this.getStyle(this.imgObj, 'height'))
        // 获取遮罩大小
        let maskWidth = parseInt(this.getStyle(this.maskObj, 'width'))
        let maskHeight = parseInt(this.getStyle(this.maskObj, 'height'))
        // 设置放大镜显示尺寸
        this.enlargeObj.style.width = parseInt(enlargebg[0]) / imgWidth * maskWidth + 'px'
        this.enlargeObj.style.height = parseInt(enlargebg[1]) / imgHeight * maskHeight + 'px'
    }
    mousemove() 
    {
        this.imgObj.onmousemove = (evt) => 
        {
            let e = evt || window.event
            let left = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth / 2
            let top = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight / 2
            if (left < 0) left = 0
            if (top < 0) top = 0
            let maxW = this.imgObj.clientWidth - this.maskObj.offsetWidth
            let maxH = this.imgObj.clientHeight - this.maskObj.offsetHeight
            if (left > maxW) left = maxW
            if (top > maxH) top = maxH
            this.maskObj.style.left = left + 'px'
            this.maskObj.style.top = top + 'px'
            // 同步放大镜
            this.together(left, top)
        }
    }
    together(left, top) 
    {
        //获取放大背景图片尺寸
        let enlargebg = (this.getStyle(this.enlargeObj, 'background-size')).split(' ')
        console.log(enlargebg);
        //获取显示图片大小
        let imgWidth = parseInt(this.getStyle(this.imgObj, 'width'))
        let imgHeight = parseInt(this.getStyle(this.imgObj, 'height'))
        // 设置移动距离
        let x = left * parseInt(enlargebg[0]) / imgWidth
        let y = top * parseInt(enlargebg[1]) / imgHeight

        // 同步
        this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`
    }
    mouseover() 
    {
        this.imgObj.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display = 'block'
        this.imgObj.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display = 'none'
    }

    // 获取非行内样式
    getStyle(tagObj, cssAttr) 
    {
        return window.getComputedStyle ? window.getComputedStyle(tagObj)[cssAttr] : tagObj.currentStyle[cssAttr]
    }
}